<template>
    <div class="index">
            <!-- 个人中xin -->
        <span @click="goMeadmin" class="iconfont icon-gerenzhongxin"></span>
        <!-- 头部 -->
        <div class="header">
            <img src="../../assets/image/logo.png" alt="">
            <div class="header-right">
                <input type="text" class="input1" v-model="message" @keydown="getsearch1">
                <!-- <button class="input2" @click="getsearch">
                    <span class="iconfont icon-fangdajing"></span>搜索
                </button> -->

                <el-dropdown trigger="click">
                    <span class="el-dropdown-link">
                        管理<i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item class="clearfix" >
                        <span @click="goMyChats">聊天中心</span>
                        <el-badge class="mark"  />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix" >
                        <span @click="goindex">后台管理</span>
                        <el-badge class="mark"  />
                        </el-dropdown-item>
                        <el-dropdown-item class="clearfix" >
                        <span @click="out">退&emsp;出</span>
                        <el-badge class="mark" />
                        </el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
            </div>
        </div>
    <!-- 导航栏 -->
     <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="首页" name="first">

        <!-- 首页推荐 -->
        <p class="p1">首页推荐</p> 
        <div class="tuijian">
                        <div class="tuijian-item" v-for="item in tuijianlist" :key="item.id">
                            <img :src="item.imgurl" alt="">
                            <span>{{item.bookname}}</span>
                             <a @click="gochapter(item.articleid)" class="alist">
                            </a>
                        </div>
        </div>

        <!-- 分类推荐 -->
        <p class="p1">分类推荐</p>
  
        <div class="Recommendedlist">
            <ul>
                <li >
                    <p class="list-title">玄幻小说</p>
                    <div class="list">
                        <div class="list-item" v-for="item in xuanhuanlist" :key="item.id">
                            <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            <span>{{item.bookname}}</span>
                        </div>
                    </div>
                </li>
                <li >
                    <p class="list-title">修真小说</p>
                    <div class="list">
                        <div class="list-item" v-for="item in xiuzhenlist" :key="item.id">
                            <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            <span>{{item.bookname}}</span>
                        </div>
                    </div>
                </li>
                <li >
                    <p class="list-title">都市小说</p>
                    <div class="list">
                        <div class="list-item" v-for="item in dushilist" :key="item.id">
                            <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            <span>{{item.bookname}}</span>
                        </div>
                    </div>
                </li>
                 <li >
                    <p class="list-title">穿越小说</p>
                    <div class="list">
                        <div class="list-item" v-for="item in chuanyuelist" :key="item.id">
                            <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurll" alt="">
                            <span>{{item.bookname}}</span>
                        </div>
                    </div>
                </li>
                 <li >
                    <p class="list-title">网游小说</p>
                    <div class="list">
                        <div class="list-item" v-for="item in wangyoulist" :key="item.id">
                            <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            <span>{{item.bookname}}</span>
                        </div>
                    </div>
                </li>
                     <li >
                    <p class="list-title">科幻小说</p>
                    <div class="list">
                        <div class="list-item" v-for="item in kehuanlist" :key="item.id">
                            <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            <span>{{item.bookname}}</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </el-tab-pane>
    <el-tab-pane label="玄幻小说" name="second" >
          <!-- 热门推荐 -->
        <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div> 

        <!-- 列表   -->
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                               <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>
   
    </el-tab-pane>
    <el-tab-pane label="修真小说" name="third" >
                   <!-- 热门推荐 -->
        <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div>   
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                                <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>
    </el-tab-pane>
    <el-tab-pane label="都市小说" name="fourth" >
                <!-- 热门推荐 -->
        <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div>   
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                                <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>
    </el-tab-pane>
    <el-tab-pane label="穿越小说" name="fiveth" >
             <!-- 热门推荐 -->
        <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div>   
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                               <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>
    </el-tab-pane>
    <el-tab-pane label="网游小说" name="sexth" >
                  <!-- 热门推荐 -->
        <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div>   
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                             <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>
    </el-tab-pane>
    <el-tab-pane label="科幻小说" name="seventh">
                  <!-- 热门推荐 -->
        <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div>   
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                               <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>
    </el-tab-pane>
    <el-tab-pane label="其他" name="eigth">
          <div class="totRecommendations">
            <span>热门推荐</span>
          <ul>
            <li class="li"><a href="https://www.bookben.net/txt/14094.html">斗罗大陆</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/8298.html">斗罗苍穹</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/37215.html">圣墟</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/2804.html">遮天</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/496.html">完美世界</a></li>
            <li class="li"><a href="https://www.bookben.net/txt/15188.html">神墓</a></li>
          </ul>
        </div>   
         <div class="list1">
                        <div class="list-item" v-for="item in cartlist" :key="item.id">
                            <div class="listitemleft">
                                <img :src="item.imgurl.indexOf('www')===-1?imgtongyong:item.imgurl" alt="">
                            </div>
                            <div class="listitemright">
                                <p>类别：{{item.catagory}}</p>
                                <p>{{item.bookname}}</p>           
                                <p>作者：{{item.author}}</p>
                                <p>{{item.date}}</p>
                                <p><a :href="item.bookurl">全文阅读</a></p>
                            </div>
                        </div>
                    </div>  
    </el-tab-pane>
  </el-tabs>

       <!-- 分页 -->
           <el-pagination
           v-if="isshow"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="list.page"
      :page-sizes="[9, 12, 15, 30]"
      :page-size="15"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
</template>
<script>
export default {
     data() {
      return {
        imgtongyong:'https://bookcover.yuewen.com/qdbimg/349573/1017361973/150',
        total:100,
        activeName: 'first',
        xuanhuanlist:[],
        xiuzhenlist:[],
        dushilist:[],
        chuanyuelist:[],
        wangyoulist:[],
        kehuanlist:[],
        currentPage4: 1,
        isshow:false,
        tuijianlist:[],
        message:'',
        cartlist:[],
        list:{
            page:1,
            pageNumber:15,
            catagoryname:""
        },
        listitem:[],
      };
    },
    mounted(){
        this.getInex()
        this.getshouyetuijian()
    },
    methods:{
        //前往聊天中心
        goMyChats(){
            this.$router.push("/chat/chatlist")
        },

        //前往chapterlist页面
        gochapter(articleid){
            this.$router.push(`/chapterlist/${articleid}`)
        },

        //获取首页推荐数据
        async getshouyetuijian(){
            let data=await this.axios.get("shouyetuijian")
            // console.log(data.data.data)
            this.tuijianlist=data.data.data
        },

        // 前往个人中心
        goMeadmin(){
            this.$router.push("/personalCenter")
        },

            getsearch1(e){
                if(e.keyCode == 13){
                    this.getsearch()
                }
            },

        //搜索
        async getsearch(){
            let data=await this.axios.get("search",{params:{
                message:this.message
            }})
            // console.log(data.data.data)
            this.$store.commit("putsearchlist",data.data.data)
            this.$router.push("/search")
        },

         handleSizeChange(val) {
             this.list.pageNumber=val
             this.handleClick1(this.tab)
    
      },
      handleCurrentChange(val) {
          this.list.page=val
          this.handleClick1(this.tab)

      },
        //获取首页推荐消息
        async getInex(){
               let data= await this.axios("http://localhost:3000")
            let list=data.data.data
            // this.cartlist=list
            // // console.log(list)
            this.xuanhuanlist=list.filter((item)=>{
               return item.catagory=="玄幻小说"
            })
             this.xiuzhenlist=list.filter((item)=>{
               return item.catagory=="修真小说"
            })
             this.dushilist=list.filter((item)=>{
               return item.catagory=="都市小说"
            })
             this.chuanyuelist=list.filter((item)=>{
               return item.catagory=="穿越小说"
            })
             this.wangyoulist=list.filter((item)=>{
               return item.catagory=="网游小说"
            })
             this.kehuanlist=list.filter((item)=>{
               return item.catagory=="科幻小说"
            })
            // console.log(this.xuanhuanlist)
        },
        //前往主页
        goindex(){
            this.$router.push("/personalCenter")
        },

        //退出登录
        out(){
            sessionStorage.clear()
            this.$router.push("/login")
        },
        async handleClick1(tab){
                 this.tab=tab
             if(tab.index==0){
                 this.isshow=false
                 return
             }
             if(tab.index==1){
               this.list.catagoryname="玄幻小说"
           }
           else if(tab.index==2){
               this.list.catagoryname="修真小说"
           }
           else if(tab.index==3){
               this.list.catagoryname="都市小说"
           }
           else if(tab.index==4){
               this.list.catagoryname="穿越小说"
           }
           else if(tab.index==5){
               this.list.catagoryname="网游小说"
           }
           else if(tab.index==6){
               this.list.catagoryname="科幻小说"
           }
           else if(tab.index==7){
               this.list.catagoryname="其他小说"
           }
            let data=await this.axios.get("catagory",{params:this.list})
            this.cartlist=data.data.data
            this.total=data.data.total
            this.isshow=true   
          },
        //导航栏点击
          handleClick(tab) {
            this.list.page=1
            this.list.pageNumber=15
            this.handleClick1(tab)
         
      }
    }
}
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
}

// .el-tabs{
//     font-size: 16px; 
//     height: 40px; 
// }

// .el-tabs__item  {
//     font-size: 20px !important;
//     font-weight: 800 !important;
// } 
div{
    box-sizing: border-box;
}
.index{
    min-height: 100vh;
    max-width: 100vw;
    position: relative;
    .icon-gerenzhongxin{
        color: #f1c40f;
        width: 40px;
        height: 40px;
        font-size: 24px;
        position: absolute;
        top:37px;
        left: 30px;
        z-index: 999;
        cursor: pointer;
    }
    .el-pagination{
        margin-top: 5px;
        padding-top: 5px;
        padding-left:300px;
        background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
    }
    .header{
        padding-left: 200px;
        padding-right: 200px;
        height:100px;
        width:100%;
        background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
        position: relative;
        img{
            height: 100px;
        }
        .header-right{
            display: inline-block;
            width:350px;
            height: 40px;
            display: flex;
            justify-content: space-around;
            position: absolute;
            top:30px ;
            right: 200px;
            .el-dropdown{
                cursor: pointer;
                // width: 100%;
                //             height: 100%;
                text-align: center;
                .el-dropdown-menu{
                    width: 100%;
                    height: 100%;
                    
                    .el-dropdown-item{
                        width: 100%;
                        height: 100%;
                        
                        span{
                            display:inline-block;
                            width: 100%;
                            height: 100%;
                        }
                    }

                }
            }
            .input1{
                display: inline-block;
                width:150px;
                height: 30px;
                border-radius: 5px;
                outline:none;
                border: 1px solid #ccc;
            }
            .input2{
                display: inline-block;
                width: 60px;
                height: 30px;
                border-radius: 5px;
                background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
                color: #ecf0f1;
                margin-left: 5px;
            }
        }
    }
    .el-tabs{
        padding-left: 200px;
        padding-right: 200px;
        // margin-top: 20px;
        // background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
        background-color: #f7f6f2;
        .el-tab-pane{
            .totRecommendations{
                background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
                // background-color: #f7f6f2;
                padding:10px 20px;
                span{
                    font-size: 16px;
                    color:#2980b9;
                    margin-right:10px;
                    cursor: pointer;
                    }
                ul{
                    list-style: none;
                    display: inline-block;
                    li{
                    display: inline-block;
                    margin-right: 8px;
                    a{
                        color: #34495e;
                        text-decoration: none;
                        cursor: pointer;
                    }
                    }
                }
            }
            .p1{
                font-size: 24px;
                font-weight: 800;
                margin-top: 20px;
                color: #e17055;
                width: 100%;
                height: 40px;
                background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);
                padding-left: 20px;
                border-radius: 10px;
                margin-bottom: 10px;
            }

            .tuijian {
                display: flex;
                justify-content: start;
                border:1px solid #ccc;
                // height: 300px;
                .tuijian-item {
                    flex:1;
                    max-width: 17%;
                    display: flex;
                    flex-direction: column;
                    margin-left:5px;
                    position: relative;
                    padding-left: 10px;
                    padding-top: 10px;
                    padding-bottom: 0;
                       .alist{  
                           display: block;
                           width:100%;
                           height: 100%;
                           position: absolute;
                           top: 0;
                           left: 0;
                       } 
                    img {
                        display: block;
                        width: 80%;
                        height: 80%;
                    }

                    span {
                    display: block;
                    display: flex;
                    font-size: 16px;
                    font-weight: 800;
                    width: 80%;
                    height: 50px;
                    line-height: 50px;
                    overflow: hidden;
                    white-space:nowrap;  //规定文本内容不换行
                    text-overflow:ellipsis ;   //显示省略符号来代表被修剪的文本。
                    justify-content: center;
                    align-items: center;
                    }
                 
                }
                }
            .Recommendedlist{
                ul{
                    li{
                        border:1px solid #ccc;
                        margin-top: 10px;
                        
                        .list-title{
                            color:#0984e3;
                            font-size: 20px;
                            font-weight: 800;
                            height: 36px;
                            padding-left: 10px;
                            background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);
                        }
                        .list{
                            padding-left: 10px;
                        padding-top: 10px;
                        display: flex;
                        .list-item{
                            flex:1;
                            display: flex;
                            flex-direction: column;
                            margin-left:5px;
                                img{
                               width:80%;
                               height: 80%;

                            }
                            span{

                            }
                        }
                            
                        }
                    }
                }
            }
                  .list1{
                      margin-top: 20px;
                        padding-left: 10px;
                        padding-top: 10px;
                        display: flex;
                        flex-wrap: wrap;
                        background: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%), radial-gradient(at top left, rgba(255,255,255,0.30) 0%, rgba(0,0,0,0.30) 100%);
                        background-blend-mode: screen;
                        .list-item{
                            width:30%; 
                            display: flex;
                            margin-left:5px;
                            .listitemleft{
                                flex:1;
                                img{
                                    width:80%;
                                    height: 80%;
                                    border:2px solid #ccc;
                                }
                            }
                           .listitemright{
                                flex:1;
                                display: flex;
                                flex-direction:column;
                                padding: 5px 5px;
                                p{
                                    flex:1;
                                    font-size: 14px;
                                   overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                }
                           }
                        }
                            
                        }
        }
    }
}
</style>